<template>
  <div class="app-container">
  	<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="地图分布" name="first">
        <!--地图分布-->
        <DisasterRiskMap v-if="completeRefreshDisasterRisk" :allListData="allListData"
                         :showHideDivBool="showHideQueryDivBool"
                         @showHideQueryDiv="showHideQueryDiv"
                         :queryMapBool="queryMapBool"
                         @showQueryMapDraw="showQueryMapDraw"
        ></DisasterRiskMap>
        <!--查询面板-->
        <div v-if="showHideQueryDivBool" class="new-queryDiv">
          <div class="new-queryDiv-inner">
            <el-form :model="newQueryParams" label-position="right" label-width="82px">
              <el-form-item label="省" prop="province">
                <el-select v-model="newQueryParams.province" placeholder="请选择" @change="newChooseProvince" clearable value-key="name">
                  <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="市" prop="city">
                <el-select v-model="newQueryParams.city" placeholder="请选择" @change="newChooseCity" clearable value-key="name">
                  <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="区/县" prop="county">
                <el-select v-model="newQueryParams.county" placeholder="请选择" @change="newChooseCounty" clearable value-key="name">
                  <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div class="new-queryBtnDiv">
              <el-button @click="queryChartsView" type="primary">查询统计</el-button>
            </div>
            <div class="new-queryMapBtnDiv">
              <el-button @click="queryMapClick" type="primary">地图圈选统计</el-button>
            </div>
            <div class="new-closeBtnDiv">
              <el-button plain @click="showHideQueryDiv(false)">关闭</el-button>
            </div>
          </div>
        </div>
        <!--空间统计图表-->
        <ChartsView :chartViewQueryParams="chartViewQueryParams" @hideChartView="hideChartView"></ChartsView>
      </el-tab-pane>
  		<el-tab-pane label="数据列表" name="second">
  			<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="120px">
		      <el-form-item label="省" prop="provinceId">
		        <el-select v-model="queryParams.provinceId" placeholder="请选择省" @change="chooseProvince" clearable>
		           <el-option
		                v-for="item in provinceData"
		                :key="item.id"
		                :label="item.name"
		                :value="item.id">
		            </el-option>
		        </el-select>
		      </el-form-item>
		      <el-form-item label="市" prop="cityId">
		        <el-select v-model="queryParams.cityId" placeholder="请选择市" @change="chooseCity" clearable>
		           <el-option
		                v-for="item in cityData"
		                :key="item.id"
		                :label="item.name"
		                :value="item.id">
		            </el-option>
		        </el-select>
		      </el-form-item>
		      <el-form-item label="区/县" prop="countyId">
		        <el-select v-model="queryParams.countyId" placeholder="请选择区/县" clearable>
		           <el-option
		                v-for="item in areaData"
		                :key="item.id"
		                :label="item.name"
		                :value="item.id">
		            </el-option>
		        </el-select>
		      </el-form-item>
		      <el-form-item label="详细地址" prop="disasterAddress">
		        <el-input
		          v-model="queryParams.disasterAddress"
		          placeholder="请输入详细地址"
		          clearable
		          @keyup.enter="handleQuery"
		        />
		      </el-form-item>
		      <el-form-item label="灾害风险点名称" prop="disasterName">
		        <el-input
		          v-model="queryParams.disasterName"
		          placeholder="请输入灾害风险点名称"
		          clearable
		          @keyup.enter="handleQuery"
		        />
		      </el-form-item>
		      <el-form-item label="类型" prop="disasterType">
		        <el-select v-model="disasterTypeM" placeholder="请输入类型" multiple clearable>
		           <el-option
		                v-for="item in disasterTypeData"
		                :key="item.dictItemCode"
		                :label="item.dictItemName"
		                :value="item.dictItemCode">
		            </el-option>
		        </el-select>
		      </el-form-item>
		      <!--<el-form-item label="任务编号" prop="taskCode">
		        <el-input
		          v-model="queryParams.taskCode"
		          placeholder="请输入任务编号"
		          clearable
		          @keyup.enter="handleQuery"
		        />
		      </el-form-item>-->
		      <el-form-item label="提交人" prop="submitter">
		        <el-input
		          v-model="queryParams.submitter"
		          placeholder="请输入提交人"
		          clearable
		          @keyup.enter="handleQuery"
		        />
		      </el-form-item>
		      <el-form-item label="提交时间" style="width: 330px">
		        <el-date-picker
		           v-model="submitTime"
		           value-format="YYYY-MM-DD"
		           type="daterange"
		           range-separator="-"
		           start-placeholder="开始日期"
		           end-placeholder="结束日期"
		        ></el-date-picker>
					</el-form-item>
		      <el-form-item>
		        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
		        <el-button plain icon="Refresh" @click="resetQuery">重置</el-button>
		      </el-form-item>
		    </el-form>
		
		    <el-row :gutter="10" class="mb8">
		      <!--<el-col :span="1.5">
		        <el-button
		          type="primary"
		          plain
		          icon="Plus"
		          @click="handleAdd"
		          v-hasPermi="['system:risk:add']"
		        >新增</el-button>
		      </el-col>
		      <el-col :span="1.5">
		        <el-button
		          type="success"
		          plain
		          icon="Edit"
		          :disabled="single"
		          @click="handleUpdate"
		          v-hasPermi="['system:risk:edit']"
		        >修改</el-button>
		      </el-col>-->
		      <el-col :span="1.5">
		        <el-button
		          plain
		          icon="Delete"
		          :disabled="multiple"
		          @click="handleDelete"
		        >删除</el-button>
		      </el-col>
		      <el-col :span="1.5">
            <el-button plain icon="Download" @click="handleImport">导入</el-button>
        	</el-col>
        	<el-col :span="1.5">
	          <el-button plain icon="Edit"  @click="handleExport">导出</el-button>
	        </el-col>
		      <!--<el-col :span="1.5">
		        <el-button
		          type="warning"
		          plain
		          icon="Download"
		          @click="handleExport"
		          v-hasPermi="['system:risk:export']"
		        >导出</el-button>
		      </el-col>-->
		      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
		    </el-row>
		
		    <el-table v-loading="loading" :data="riskList" row-key="id" border @selection-change="handleSelectionChange">
		      <el-table-column type="selection" :reserve-selection="true" width="55" align="center" />
		      <el-table-column label="省" align="center" prop="province" />
		      <el-table-column label="市" align="center" prop="city" />
		      <el-table-column label="区/县" align="center" prop="county" />
		      <el-table-column label="详细地址" align="center" prop="disasterAddress" />
		      <el-table-column label="灾害风险点名称" align="center" prop="disasterName" />
		      <el-table-column label="类型" align="center" prop="disasterType">
		      	<template #default="scope">
		      		<span v-for="(item, index) in scope.row.disasterType.split(',')" :key="index">
		      			{{transDisasterType(item)}}
              	<span v-if ="index!==scope.row.disasterType.split(',').length-1 ">、</span>
		      		</span>

		          <!--<span v-if="scope.row.disasterType=='hp'">滑坡</span>
		          <span v-if="scope.row.disasterType=='bt'">崩塌</span>
		          <span v-if="scope.row.disasterType=='hz'">火灾</span>
		          <span v-if="scope.row.disasterType=='dlyd'">道路拥堵</span>
		          <span v-if="scope.row.disasterType=='zd'">中断</span>
		          <span v-if="scope.row.disasterType=='qt'">其他</span>-->
		        </template>
		      </el-table-column>
		      <!--<el-table-column label="是否提交" align="center" prop="isSubmit">
		      	<template #default="scope">
		          <span v-if="scope.row.isSubmit==0">未提交</span>
		          <span v-if="scope.row.isSubmit==1">已提交</span>
		        </template>
		      </el-table-column>-->
		      <el-table-column label="提交人" align="center" prop="submitter" />
		      <el-table-column label="提交时间" align="center" prop="submitTime" width="180">
		        <template #default="scope">
		          <span>{{ parseTime(scope.row.submitTime, '{y}-{m}-{d}') }}</span>
		        </template>
		      </el-table-column>
		      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
		        <template #default="scope">
		          <el-button
		            type="text"
		            @click="handleUpdate(scope.row)"
		            v-if="scope.row.taskStatus!=2"
		          >修改</el-button>
		          <el-button
		            type="text"
		            @click="handleView(scope.row)"
				            
		          >查看</el-button>
		        </template>
		      </el-table-column>
		    </el-table>
		    
		    <pagination
		      v-show="total>0"
		      :total="total"
		      v-model:page="queryParams.page"
		      v-model:limit="queryParams.rows"
		      @pagination="getList"
		    />
		
		    <!-- 添加或修改灾害风险点信息对话框 -->
		    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
		    	<p class="dialogTitle">{{title}}</p>
		      <el-form ref="riskRef" :model="form" :rules="rules" label-width="120px">
		        <el-form-item label="省" prop="province">
		          <el-select v-model="form.province" placeholder="请输入省" @change="chooseProvince" :disabled="isEdit" style="width: 100%;">
               <el-option
	                v-for="item in provinceData"
	                :key="item.id"
	                :label="item.name"
	                :value="item.id">
                </el-option>
            	</el-select>
		        </el-form-item>
		        <el-form-item label="市" prop="city">
		          <el-select v-model="form.city" placeholder="请输入市" @change="chooseCity" :disabled="isEdit" style="width: 100%;">
               <el-option
	                v-for="item in cityData"
	                :key="item.id"
	                :label="item.name"
	                :value="item.id">
                </el-option>
            	</el-select>
		        </el-form-item>
		        <el-form-item label="区/县" prop="county">
		          <el-select v-model="form.county" placeholder="请输入区/县" :disabled="isEdit" style="width: 100%;">
	               <el-option
		                v-for="item in areaData"
		                :key="item.id"
		                :label="item.name"
		                :value="item.id">
	                </el-option>
	            </el-select>
		        </el-form-item>
		        <el-form-item label="详细地址" prop="disasterAddress">
		          <el-input v-model="form.disasterAddress" placeholder="请输入详细地址" />
		        </el-form-item>
		        <el-form-item label="灾害风险点名称" prop="disasterName">
		          <el-input v-model="form.disasterName" placeholder="请输入灾害风险点名称" />
		        </el-form-item>
		        <el-form-item label="经度" prop="longitude">
		          <el-input v-model="form.longitude" placeholder="请输入经度" />
		        </el-form-item>
		        <el-form-item label="纬度" prop="latitude">
		          <el-input v-model="form.latitude" placeholder="请输入纬度" />
		        </el-form-item>
		        <el-form-item label="类型" prop="disasterType">
		        <el-select v-model="form.disasterType" placeholder="请输入类型" multiple clearable  style="width: 100%;">
		           <el-option
		                v-for="item in disasterTypeData"
		                :key="item.dictItemCode"
		                :label="item.dictItemName"
		                :value="item.dictItemCode">
		            </el-option>
		        </el-select>
		      </el-form-item>
		        <el-form-item label="灾害风险点描述" prop="disasterDescribe">
		          <el-input v-model="form.disasterDescribe" type="textarea" placeholder="请输入灾害风险点描述" />
		        </el-form-item>
		        <el-form-item label="附件">
		          <file-upload ref="fileUpload" :disabled="isEditFile" v-model="form.fileList"/>
		        </el-form-item>
		        <el-form-item label="提交人" prop="submitter">
		          <el-input v-model="form.submitter" placeholder="请输入提交人" :disabled="isEdit"/>
		        </el-form-item>
		        <el-form-item label="提交时间" prop="submitTime">
		          <el-date-picker clearable
		            v-model="form.submitTime"
		            type="date"
		            value-format="YYYY-MM-DD HH:mm:ss"
		            placeholder="请选择提交时间"
		            style="width: 100%;"
		            :disabled="isEdit"
		            >
		          </el-date-picker>
		        </el-form-item>
		      </el-form>
		      <template #footer>
		        <div class="dialog-footer">
		          <el-button type="primary" @click="submitForm" v-show="isShow">确 定</el-button>
		          <el-button plain @click="cancel">取 消</el-button>
		        </div>
		      </template>
		    </el-dialog>
		    <!-- 导入对话框 -->
        <el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>
          <p></p>
           <el-upload
              ref="uploadRef"
              :limit="1"
              accept=".xls"
              :headers="upload.headers"
              :action="upload.url"
              :disabled="upload.isUploading"
              :before-upload="handleFileBeforeUpload"
              :on-progress="handleFileUploadProgress"
              :on-error="handleFileUploadError"
              :on-success="handleFileSuccess"
              :auto-upload="false"
              drag
           >
              <el-icon class="el-icon--upload"><upload-filled /></el-icon>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <template #tip>
                 <div class="el-upload__tip text-center">
                    <span>仅允许导入xls格式文件。</span>
                    <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate('灾害风险点信息模板.xls')">下载模板</el-link>
                 </div>
              </template>
           </el-upload>
           <template #footer>
              <div class="dialog-footer">
                 <el-button type="primary" @click="submitFileForm">确 定</el-button>
                 <el-button plain @click="upload.open = false">取 消</el-button>
              </div>
           </template>
        </el-dialog>
			</el-tab-pane>
  	</el-tabs>
    
  </div>
</template>

<script setup name="disasterRisk">
//地图
import DisasterRiskMap from '@/map/basedatamanage/disasterRisk/map.vue';
import ChartsView from '@/views/basedatamanage/spaceData/chartsView.vue';
import { listRisk, getRisk, delRisk, addRisk, updateRisk, mapAllListRisk } from "@/api/basedatamanage/risk";
import { getProvince, getChildArea} from "@/api/system/division";
import { getDict } from "@/api/system/dict";
import { getToken } from "@/utils/auth";

const { proxy } = getCurrentInstance();

/*** 导入参数 */
const upload = reactive({
  open: false,
  title: "",
  isUploading: false,
  headers: { token: "token " + getToken() },
  url: import.meta.env.VITE_APP_BASE_API + "/disasterRisk/uploadDisasterRisk"
});

const activeName = ref("first");
const riskList = ref([]);
const isEdit = ref(true);
const isEditFile = ref(false);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const isShow = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const submitTime = ref("");//提交时间
const disasterTypeM = ref([]);//
const provinceData = ref([]);//省
const cityData = ref([]);//市
const areaData = ref([]);//区、县
const disasterTypeData = ref([]);//类型

const data = reactive({
  form: {},
  queryParams: {
    page: 1,
    rows: 10,
    province: null,
    city: null,
    county: null,   
		disasterAddress: null,
    disasterName: null,
    disasterType: null,
    taskCode: null,
    submitter: null,
    startTime:null,
    endTime:null,
    
  },
  rules: {
  	province: [
      { required: true, message: "省不能为空", trigger: "blur" }
    ],
    city: [
      { required: true, message: "市不能为空", trigger: "blur" }
    ],
    county: [
      { required: true, message: "县不能为空", trigger: "blur" }
    ],    
		disasterAddress: [
      { required: true, message: "详细地址不能为空", trigger: "blur" }
    ],
    disasterName: [
      { required: true, message: "灾害风险点名称不能为空", trigger: "blur" }
    ],
    longitude: [
      { required: true, message: "经度不能为空", trigger: "blur" }
    ],
    latitude: [
      { required: true, message: "纬度不能为空", trigger: "blur" }
    ],
    disasterType: [
      { required: true, message: "类型不能为空", trigger: "change" }
    ],
    disasterDescribe: [
      { required: true, message: "灾害风险点描述不能为空", trigger: "blur" }
    ],
    submitter: [
      { required: true, message: "提交人不能为空", trigger: "blur" }
    ],
    submitTime: [
      { required: true, message: "提交时间不能为空", trigger: "blur" }
    ]
  },
  chartViewQueryParams: {//空间统计查询参数
    province: "",
    city: "",
    county: "",
    provinceId: "",
    cityId: "",
    countyId: "",
    dataType: "灾害风险点信息",//数据类型
    geomText: "",//地图圈选空间数据
    title:"",//显示空间统计标题
    showBool:false,//是否显示
  },
  newQueryParams: {
    province: "",
    city: "",
    county: "",
    provinceId: "",
    cityId: "",
    countyId: "",
    dataType: "灾害风险点信息",//数据类型
  },
});

const { queryParams, form, rules,chartViewQueryParams,newQueryParams } = toRefs(data);

/** 获取字典值 */
function getDictData() {
	getDict("zhfxlx").then(response => {
	    disasterTypeData.value = response.data;
	});
}

//地图传参--start
const completeRefreshDisasterRisk = ref(false);//防止刷新后地图不显示
const allListData = ref([]);

const showHideQueryDivBool = ref(false);//是否显示查询面板
const showHideQueryDiv = (bool)=>{//显示|隐藏查询面板
  showHideQueryDivBool.value = bool;
  //清空查询参数
  clearQueryParams();
  queryMapBool.value = false;//关闭地图圈选查询
}

//清空查询参数
function clearQueryParams(){
  newQueryParams.value.province = null;
  newQueryParams.value.city = null;
  newQueryParams.value.county = null;
  newQueryParams.value.provinceId = null;
  newQueryParams.value.cityId = null;
  newQueryParams.value.countyId = null;
  cityData.value = [];
  areaData.value = [];
}

//选择省
function newChooseProvince(value) {
  newQueryParams.value.city = null;
  newQueryParams.value.county = null;
  newQueryParams.value.province = value.name;
  newQueryParams.value.cityId = null;
  newQueryParams.value.countyId = null;
  newQueryParams.value.provinceId = value.id;
  cityData.value = [];
  areaData.value = [];
  getChildArea(value.id).then(response => {
    cityData.value = response.data;
  });
}
//选择市
function newChooseCity(value) {
  newQueryParams.value.city = value.name;
  newQueryParams.value.county = null;
  newQueryParams.value.cityId = value.id;
  newQueryParams.value.countyId = null;
  areaData.value = [];
  getChildArea(value.id).then((response) => {
    areaData.value = response.data;
  });
}
//选择区县
function newChooseCounty(value) {
  newQueryParams.value.county = value.name;
  newQueryParams.value.countyId = value.id;
}

//地图圈选查询
const showQueryMapDraw = (polygonWkt)=>{
  if(polygonWkt!=null && polygonWkt!=""){
    console.log("地图圈选查询");
    console.log(polygonWkt);
    //空间统计查询参数
    chartViewQueryParams.value.province = "";
    chartViewQueryParams.value.city = "";
    chartViewQueryParams.value.county = "";
    chartViewQueryParams.value.provinceId = "";
    chartViewQueryParams.value.cityId = "";
    chartViewQueryParams.value.countyId = "";
    chartViewQueryParams.value.geomText = polygonWkt;//地图圈选空间数据
    let title = "【" + chartViewQueryParams.value.dataType +"】";
    chartViewQueryParams.value.title = title + "地图圈选查询空间统计结果";//标题
    //显示空间统计
    chartViewQueryParams.value.showBool = true;
  }
}

//开启空间统计查询功能
const queryChartsView = ()=>{
  //空间统计查询参数
  chartViewQueryParams.value.province = newQueryParams.value.province;
  chartViewQueryParams.value.city = newQueryParams.value.city;
  chartViewQueryParams.value.county = newQueryParams.value.county;
  chartViewQueryParams.value.provinceId = newQueryParams.value.provinceId;
  chartViewQueryParams.value.cityId = newQueryParams.value.cityId;
  chartViewQueryParams.value.countyId = newQueryParams.value.countyId;
  chartViewQueryParams.value.dataType = newQueryParams.value.dataType;//数据类型
  chartViewQueryParams.value.geomText = "";//地图圈选空间数据
  let title = "";
  if(newQueryParams.value.province!=null){
    title += newQueryParams.value.province;
  }
  if(newQueryParams.value.city!=null){
    title += newQueryParams.value.city;
  }
  if(newQueryParams.value.county!=null){
    title += newQueryParams.value.county;
  }
  title += "【" + newQueryParams.value.dataType +"】";
  chartViewQueryParams.value.title = title + "查询空间统计结果";//标题
  //显示空间统计
  chartViewQueryParams.value.showBool = true;
  queryMapBool.value = false;//关闭地图圈选查询
}
const queryMapBool = ref(false);//是否开启地图圈选查询
//地图圈选查询空间统计
const queryMapClick = ()=>{
  //清空查询参数
  clearQueryParams();
  //空间统计查询参数
  chartViewQueryParams.value.province = "";
  chartViewQueryParams.value.city = "";
  chartViewQueryParams.value.county = "";
  chartViewQueryParams.value.provinceId = "";
  chartViewQueryParams.value.cityId = "";
  chartViewQueryParams.value.countyId = "";
  chartViewQueryParams.value.geomText = "";//地图圈选空间数据
  queryMapBool.value = false;//关闭地图圈选查询
  nextTick(() => {
    queryMapBool.value = true;//开启地图圈选查询
  });
}
//关闭空间统计
const hideChartView = (bool)=>{
  //关闭空间统计
  chartViewQueryParams.value.showBool = bool;
}
//地图传参--end

/** 查询灾害风险点信息列表 */
function getList() {
  loading.value = true;
  listRisk(queryParams.value).then(response => {
    riskList.value = response.data.rows;
    total.value = response.data.total;
    loading.value = false;
  });
}

/** 查询灾害风险点信息列表 */
function getMapList() {
  //地图查询全部灾害风险点列表
  mapAllListRisk().then((response) => {
    nextTick(() => {
      console.log("地图查询全部灾害风险点列表：");
      // console.log(response.data);
      allListData.value = response.data;
      // completeRefreshDisasterRisk.value = true;//防止地图刷新后不显示--
    });
  });
}

/** 获取省列表 */
function getProvinceData() {
	getProvince().then(response => {
	    provinceData.value = response.data;
	});
}

function chooseProvince(value){
	queryParams.value.cityId = null;
	queryParams.value.countyId = null;
	cityData.value = [];
	areaData.value = [];
	getChildArea(value).then(response => {
    cityData.value = response.data;
	});
//	provinceData.value.map(item => {//遍历数据
//		if(item.id == value){
//			if(item.name == "北京市"||item.name == "天津市"||item.name == "上海市"||item.name == "重庆市"){
//		    cityData.value.push(JSON.parse(JSON.stringify(item)));
//			}else{
//				getChildArea(value).then(response => {
//			    cityData.value = response.data;
//				});
//			}
//			return;
//		}   
//})		
}

function chooseCity(value){
	queryParams.value.countyId = null;
	areaData.value = [];
	getChildArea(value).then(response => {
	    areaData.value = response.data;
	});
}

// 取消按钮
function cancel() {
  open.value = false;
  reset();
}

// 表单重置
function reset() {
  form.value = {
    id: null,
    province: null,
    city: null,
    county: null,
    
		disasterAddress: null,
    disasterName: null,
    longitude: null,
    latitude: null,
    disasterType: null,
    disasterDescribe: null,
    file: null,
    taskCode: null,
    isSubmit: null,
    delFlag: null,
    createId: null,
    createTime: null,
    submitter: null,
    submitTime: null
  };
  proxy.resetForm("riskRef");
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.page = 1;  
  queryParams.value.startTime = submitTime.value? submitTime.value[0] : "";
  queryParams.value.endTime = submitTime.value? submitTime.value[1] : "";
  queryParams.value.disasterType = disasterTypeM.value.join(",");
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
	submitTime.value = "";
	cityData.value = [];
	areaData.value = [];
  proxy.resetForm("queryRef");
  handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 新增按钮操作 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加灾害风险点信息";
}

/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  isShow.value = true;
  isEditFile.value = false;
  const id = row.id || ids.value
  getRisk(id).then(response => {
    form.value = response.data.data;  
    form.value.fileList = response.data.file;
    form.value.disasterType = form.value.disasterType.split(",");
    open.value = true;
    title.value = "修改灾害风险点信息";
  });
}

/** 查看按钮操作 */
function handleView(row) {
  reset();
  isShow.value = false;
	isEditFile.value = true;
  const id = row.id || ids.value
  getRisk(id).then(response => {
    form.value = response.data.data;
    form.value.fileList = response.data.file;
    form.value.disasterType = form.value.disasterType.split(",");
    open.value = true;
    title.value = "查看灾害风险点信息";
  });
}

/** 提交按钮 */
function submitForm() {
	//proxy.$refs["fileUpload"].submitUpload(form.value.id);
	console.log(proxy.$refs["fileUpload"].fileList)
	const fileList = JSON.parse(JSON.stringify(proxy.$refs["fileUpload"].fileList));
  const attachIds = [];
  for(var i = 0; i<fileList.length;i++) {
	   attachIds.push(fileList[i].attachId)
 	}
  form.value.file = attachIds.join(",");
  form.value.disasterType = form.value.disasterType.join(",");
	proxy.$refs["riskRef"].validate(valid => {
	    if (valid) {
	      if (form.value.id != null) {
	      	
	        updateRisk(form.value).then(response => {
	          proxy.$modal.msgSuccess("修改成功");
	          open.value = false;
	          getList();
	        });
	      }
	    }
	});
}

/** 删除按钮操作 */
function handleDelete() {
  const id = ids.value;
  proxy.$modal.confirm('是否确认删除灾害风险点信息编号为"' + id + '"的数据项？').then(function() {
    return delRisk(JSON.parse(JSON.stringify(id)).join(","));
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download('/disasterRisk/exportDisasterRisk', {
    ...queryParams.value
  }, `灾害风险点信息_${new Date().getTime()}.xls`)
}
/*切换标签页*/
function handleClick(tab, event) {
	console.log(tab.props.name);
	if(tab.props.name=="first"){
		getMapList();
	}else{
		getList();
	}
}

function transDisasterType(value) {	
  if (value == "hp") {
    return "滑坡";
  }else if(value == "bt"){
		return "崩塌";
  }else if(value == "hz"){
		return "火灾";
  }else if(value == "dlyd"){
		return "道路拥堵/中断";
  }else if(value == "wxpxl"){
		return "危险品泄露";
  }else if(value == "qt"){
		return "其他";
  }
	
}

// 模板下载
function importTemplate(name) {
  proxy.download("/base/product/downloadExcel", {
    fileName:name
  }, name);
};

/** 提交上传文件 */
function submitFileForm() {
  proxy.$refs["uploadRef"].submit();
};

/** 打开导入表弹窗 */
function handleImport() {
    upload.title = "导入";
    upload.open = true;
}

/**文件上传前处理 */
function handleFileBeforeUpload(file) {
    proxy.$modal.loading("正在上传文件，请稍候...");
    return true
}

/**文件上传中处理 */
const handleFileUploadProgress = (event, file, fileList) => {
  upload.isUploading = true;
};
// 上传失败
function handleFileUploadError(err) {
  proxy.$modal.closeLoading();
  proxy.$modal.msgError("上传文件失败");
}
/** 文件上传成功处理 */
const handleFileSuccess = (response, file, fileList) => {
  upload.open = false;
  upload.isUploading = false;
  proxy.$modal.closeLoading();
  proxy.$refs["uploadRef"].handleRemove(file);
  proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.message + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
  getList();
};

onMounted(()=>{
  getMapList();
  getProvinceData();
  getDictData();
  completeRefreshDisasterRisk.value = true;//防止地图刷新后不显示
})
</script>

<style scoped lang="scss">
.new-closeBtnDiv {
  position: absolute;
  /*right: 50px;*/
  right: 0px;
  bottom:20px;
}
//查询面板
.new-queryDiv{
  position:absolute;
  top:16px;
  left:100px;
  width:358px;
  height:230px;
  background-color:#fff;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
  border:1px solid #707070;
  border-radius: 4px;
}
.new-queryDiv-inner {
  position:absolute;
  top:20px;
  left:30px;
  right:30px;
  bottom:0px;
}
.new-queryBtnDiv {
  position: absolute;
  /*left: 80px;*/
  left: 0px;
  bottom:20px;
}
.new-queryMapBtnDiv {
  position: absolute;
  left: 104px;
  bottom:20px;
}
</style>
